<!DOCTYPE html>
<html>

<head>
    <title>华为开发者案例查询</title>
    <style>
        :root {
            --primary-color: #007bff;
            --primary-hover: #0056b3;
            --success-color: #28a745;
            --success-hover: #218838;
            --error-color: #dc3545;
            --error-bg: #f8d7da;
            --text-color: #333;
            --light-gray: #f8f9fa;
            --border-color: #eee;
            --code-bg: #f5f5f5;
            --warn-color: rgb(233, 174, 126);
            ;
            --warn-hover: rgb(203, 180, 106);
            ;
        }

        body {
            font-family: 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', sans-serif;
            max-width: 1600px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
            color: var(--text-color);
            background-color: #fafafa;
        }

        .container {
            display: flex;
            flex-direction: column;
            gap: 25px;
        }

        .input-group {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }

        input[type="text"] {
            flex: 1;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 16px;
            transition: border 0.3s;
        }

        button {
            padding: 12px 24px;
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 500;
            transition: all 0.3s;
        }

        .query-btn {
            background-color: var(--primary-color);
        }

        .query-btn:hover {
            background-color: var(--primary-hover);
        }

        .clear-btn {
            background-color: var(--warn-color);
        }

        .clear-btn:hover {
            background-color: var(--warn-hover);
        }

        .download-btn {
            background-color: var(--success-color);
            padding: 8px 16px;
            font-size: 14px;
        }

        .download-btn:hover {
            background-color: var(--success-hover);
        }

        .error {
            color: var(--error-color);
            padding: 12px 15px;
            background-color: var(--error-bg);
            border-radius: 6px;
            margin: 15px 0;
        }

        .result-container {
            display: flex;
            gap: 20px;
            margin-top: 20px;
        }

        .case-content {
            flex: 2;
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .debug-info {
            flex: 1;
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .case-title {
            font-size: 24px;
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid var(--border-color);
        }

        .case-introduce {
            font-size: 16px;
            color: #555;
            margin-bottom: 25px;
            line-height: 1.7;
            background-color: var(--light-gray);
            padding: 15px;
            border-radius: 6px;
        }

        .content-body {
            font-size: 15px;
            line-height: 1.8;
            white-space: pre-wrap;
            word-break: break-word;
        }

        .debug-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .debug-title {
            font-size: 18px;
            font-weight: 600;
            color: #444;
        }

        textarea.debug-content {
            width: 95%;
            height: 700px;
            font-family: 'Courier New', monospace;
            font-size: 13px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 6px;
            background-color: var(--code-bg);
            resize: none;
        }

        @media (max-width: 768px) {
            .result-container {
                flex-direction: column;
            }
        }
    </style>
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
</head>

<body>
    <div class="container">
        <h1>华为开发者案例查询</h1>

        <form method="POST" id="queryForm">
            <div class="input-group">
                <input type="text" name="url" id="urlInput" placeholder="请输入案例URL"
                    value="{{ url if url is defined else '' }}">
                <div class="button-group">
                    <button type="submit" class="query-btn">查询案例</button>
                    <button type="button" class="clear-btn" id="clearBtn">清空</button>
                </div>
            </div>
        </form>

        {% if error %}
        <div class="error" id="errorDisplay">{{ error }}</div>
        {% endif %}

        {% if result and not result.error %}
        <div class="result-container" id="resultDisplay">
            <div class="case-content">
                <div class="case-title" id="rn">{{ result.name }}</div>
                <div class="case-introduce" id="ri">{{ result.introduce }}</div>
                <div class="content-body" id="rc">{{ result.content | safe }}</div>
            </div>

            <div class="debug-info">
                <div class="debug-header">
                    <div class="debug-title">content原始返回</div>
                    <button class="download-btn" id="downloadBtn">下载为MD文件</button>
                </div>
                <textarea class="debug-content" readonly id="drc">{{ result.content }}</textarea>
            </div>
        </div>
        {% elif result and result.error %}
        <div class="error" id="errorDisplay">{{ result.error }}</div>
        {% endif %}
    </div>

    <script>
        // 清空功能
        document.getElementById('clearBtn').addEventListener('click', function () {
            // 清空输入框
            document.getElementById('urlInput').value = '';
            document.getElementById('rn').textContent = '无标题';
            document.getElementById('ri').textContent = '暂无介绍';
            document.getElementById('rc').textContent = '暂无内容';
            document.getElementById('drc').textContent = '暂无内容';

            fetch('/clean', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    content: content,
                    filename: filename
                })
            })
                .catch(error => {
                    console.log('清空');
                });

            // 重置表单状态
            document.getElementById('queryForm').reset();

            // 滚动到顶部
            window.scrollTo(0, 0);
        });

        // 阻止表单重新提交
        if (window.history.replaceState) {
            window.history.replaceState(null, null, window.location.href);
        }

        // 下载功能
        document.getElementById('downloadBtn')?.addEventListener('click', function () {
            const content = document.querySelector('.debug-content').value;
            const filename = `{{ result.name | safe }}.md` || '华为案例.md';

            fetch('/download', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    content: content,
                    filename: filename
                })
            })
                .then(response => {
                    if (!response.ok) {
                        return response.json().then(err => { throw new Error(err.error) });
                    }
                    return response.blob();
                })
                .then(blob => {
                    const url = window.URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = filename;
                    document.body.appendChild(a);
                    a.click();
                    window.URL.revokeObjectURL(url);
                    document.body.removeChild(a);
                })
                .catch(error => {
                    alert('下载失败: ' + error.message);
                });
        });
    </script>
</body>

</html>